<template>
  <!-- 头部轮播图 -->
  <Swipper />
  <!-- 中间主要内容以及底部上方的文字 -->
  <div class="main">
    <RecommendPlaylist />
    <Buttom />
  </div>
</template>

<script lang="ts">
export default {
  name: 'HCategory',
}
</script>

<script lang="ts" setup>
import Carousel from '@/components/Carousel/index.vue'
import Buttom from './components/Buttom/index.vue'
import RecommendPlaylist from './components/RecommendPlaylist/index.vue'
import Swipper from './components/Swipper/index.vue'
import { reactive, ref } from 'vue'
</script>

<style scoped>
.main {
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 20px;
}
</style>
